<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2025-08-01 18:22:46
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2025-08-06 15:41:13
 * @Description: 
 * 
 * Copyright (c) 2025 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="请输入头饰名称" style="width: 200px" class="filter-item" @keyup.enter="handleFilter" />
      <el-select v-model="listQuery.categoryId" placeholder="选择分类" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in categoryOptions" :key="item._id" :label="item.name" :value="item._id" />
      </el-select>
      <el-select v-model="listQuery.isRecommended" placeholder="推荐状态" clearable style="width: 120px" class="filter-item">
        <el-option label="推荐" :value="true" />
        <el-option label="不推荐" :value="false" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="Search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="warning" icon="Refresh" @click="handleRefresh">重置刷新</el-button>
      <el-button class="filter-item" type="success" icon="Plus" @click="handleCreate">新增头饰</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
      <el-table-column align="center" type="index" label="序号" width="95">
        <template #default="scope">
          {{ (listQuery.pageIndex - 1) * listQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="头饰图片" width="120" align="center">
        <template #default="scope">
          <el-image :src="scope.row.imageUrl" style="width: 80px; height: 80px" fit="cover" :z-index="99999" preview-teleported :preview-src-list="[scope.row.imageUrl]" />
        </template>
      </el-table-column>
      <el-table-column label="头饰名称" align="center">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center" width="120">
        <template #default="scope">
          {{ scope.row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="推荐状态" align="center" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.isRecommended ? 'success' : 'info'">
            {{ scope.row.isRecommended ? '推荐' : '不推荐' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template #default="scope">
          {{ scope.row.createdTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 15px; background: #fff; padding: 10px" :page-size="listQuery.pageSize" @change="handlePageChange" background layout="prev, pager, next" :total="total" />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { getHeadwearList, deleteHeadwear, getHeadwearCategories } from '@/api/headwear';

  const router = useRouter();

  const list = ref([]);
  const total = ref(0);
  const listLoading = ref(true);
  const categoryOptions = ref([]);

  const listQuery = reactive({
    pageIndex: 1,
    pageSize: 20,
    name: '',
    categoryId: '',
    isRecommended: ''
  });

  const handlePageChange = page => {
    listQuery.pageIndex = page;
    getList();
  };

  const getList = async () => {
    listLoading.value = true;
    try {
      const response = await getHeadwearList(listQuery);
      if (response.code === 200) {
        list.value = response.data.list;
        total.value = response.data.total;
      }
    } catch (error) {
      console.error('获取头饰列表失败:', error);
      ElMessage.error('获取头饰列表失败');
    } finally {
      listLoading.value = false;
    }
  };

  const getCategories = async () => {
    try {
      const response = await getHeadwearCategories();
      if (response.code === 200) {
        categoryOptions.value = response.data.list;
      }
    } catch (error) {
      console.error('获取分类列表失败:', error);
    }
  };

  const handleFilter = () => {
    listQuery.page = 1;
    getList();
  };

  const handleCreate = () => {
    router.push('/headwear/create');
  };

  const handleUpdate = row => {
    router.push(`/headwear/edit/${row._id}`);
  };

  const handleDelete = row => {
    ElMessageBox.confirm(`确定要删除头饰"${row.name}"吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const response = await deleteHeadwear(row._id);
        if (response.code === 200) {
          ElMessage.success('删除成功');
          getList();
        } else {
          ElMessage.error(response.msg || '删除失败');
        }
      } catch (error) {
        console.error('删除头饰失败:', error);
        ElMessage.error('删除失败');
      }
    });
  };

  /**
   * @description: 重置刷新
   * @return {*}
   */
  const handleRefresh = () => {
    listQuery.pageIndex = 1;
    listQuery.pageSize = 20;
    listQuery.name = '';
    listQuery.categoryId = '';
    listQuery.isRecommended = '';
    getList();
  };

  onMounted(() => {
    getList();
    getCategories();
  });
</script>

<style scoped>
  .filter-container {
    padding-bottom: 10px;
  }

  .filter-item {
    margin-right: 10px;
  }
</style>
